﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Gauge, Gauge, Radial Gauge, jqxGauge" />
    <meta name="description" content="In the following demo you can see how you can cuztomize jqxGauge's ranges. You can set range's start and end width, start and end distance from the gauge's bundaries and custom style." />
    <title id='Description'>jqxGauge displays an indicator within a range of values. Gauges
        can be used in a table or matrix to show the relative value of a field in a range
        of values in the data region, for example, as a KPI</title>
  

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.tabs.min.js"></script>

    <script type="text/javascript" src="js/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqxchart.js"></script>
    <script type="text/javascript" src="js/jqxgauge.js"></script>
  
<style type="text/css">
.jqx-gauge-label, .jqx-gauge-caption
{
    fill: #333333;
    color: #333333;
    font-size: 9px;
    font-family: Verdana;
}
</style>


  <style type="text/css">
        #gaugeValue {
	        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3));
	        background-image: -webkit-linear-gradient(#fafafa, #f3f3f3);
	        background-image: -moz-linear-gradient(#fafafa, #f3f3f3);
	        background-image: -o-linear-gradient(#fafafa, #f3f3f3);
	        background-image: -ms-linear-gradient(#fafafa, #f3f3f3);
	        background-image: linear-gradient(#fafafa, #f3f3f3);
	        -webkit-border-radius: 3px;
	        -moz-border-radius: 3px;
	        -ms-border-radius: 3px;
	        -o-border-radius: 3px;
	        border-radius: 3px;
	        -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
	        -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
	        box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
	        padding: 10px;
	    }
		
		
		
	.stitched {
    height:100px;
    width:500px;
    padding: 5px 10px 5px 10px;
    margin: 15px;
    background: #e2e2e2;
    border: 2px dashed rgba(255,255,255,0.7);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5);
        }	
		
		
		
		
		
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#gaugeContainer').jqxGauge({
                ranges: [{ startValue: 0, endValue: 2, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
                         { startValue: 2, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
                         { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
                         { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
                ticksMinor: { interval: 10, size: '5%' },
                ticksMajor: { interval: 120, size: '9%' },
                value: 0,
                colorScheme: 'scheme05',
				width:  250,
                height:  250,
                animationDuration: 1000
            });

            $('#gaugeContainer').on('valueChanging', function (e) {
                $('#gaugeValue').text(Math.round(e.args.value) + ' кП');
            });

            $('#gaugeContainer').jqxGauge('value', 140);

            $('#linearGauge').jqxLinearGauge({
                orientation: 'vertical',
                width: 150,
                height: 230,
                ticksMajor: { size: '10%', interval: 10 },
                ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
                max: 160,
				  min: 0,
				
                pointer: { size: '5%' },
                colorScheme: 'scheme05',
                labels: { interval: 20, formatValue: function (value, position) {
                    if (position === 'far') {
                        value = (9 / 5) * value + 32;
                        if (value === -76) {
                            return '°F';
                        }
                        return value + '°';
                    }
                    if (value === -60) {
                        return '°C';
                    }
                    return value + '°';
                }
                },
                ranges: [
                { startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
                { startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
                { startValue: 35, endValue: 150, style: { fill: '#FF4800', stroke: '#FF4800'}}],
                animationDuration: 1500
            });

            $('#linearGauge').jqxLinearGauge('value', 40);
        });
    </script>
</head>
<body style="background:white;">
    <div id="demoWidget" style="position: relative;">
 

	 <div id="gaugeContainer" style="position:absolute;left:130px;top:281px;width:1px;height:1px;z-index:6;font-size: 5px; ">
    </div>  
	   
	   

	   <div id="gaugeValue" style="position: absolute; top: 235px; left: 232px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
        <div style="margin-left: 60px; float: left;" id="linearGauge"></div>
    </div>
	
	
	 <div id="g" class="stitched" style="position:absolute;left:530px;top:181px;width:140px;height:160px;z-index:6;font-size: 5px; ">
    </div>  
	   
	   	
	
	
	
</body>
</html>